
html,body {
    height:100%;
}
.wrapper,body {
    font-family: upright , 'Microsoft YaHei', arial, sans-serif;
    position: relative;
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    overflow: hidden;
    height:100%;
    width:100%;
}
*{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

body{
    position: relative;
    /*网格线*/
    background-color: #fd800a;
    background-image:
            -webkit-linear-gradient(top, transparent 29px, #d86d03 30px),
            -webkit-linear-gradient(left, transparent 29px, #d86d03 30px);
    background-image:
            linear-gradient(to bottom, transparent 29px, #d86d03 30px),
            linear-gradient(to right, transparent 29px, #d86d03 30px);
    background-size: 30px 30px;
}

.loading {
    position: fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}
.loading .img {
    position: absolute;
    top:50%;
    margin-top:-1.55rem;
    left:50%;
    margin-left:-1.5rem;
    width:3rem;
    height:3.1rem;
    background: url("../images/loading-img.png") center no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
    z-index: 20;
}
.loading .item {
    opacity: 0;
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-0.4rem;
    width:0.86rem;
    height:0.44rem;
    background: url("../images/loading-item.png") center no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
    z-index: 10;
    margin-top:-3rem;
    animation: loading 2s infinite both;
}
.loading .item.item-1{
    animation-delay: 1s;
}
@keyframes loading {
    0%{
        opacity: 0;
        margin-top:-3rem;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        margin-top:-1rem;
    }
}
.loading .progress {
    position: absolute;
    bottom: -1rem;
    left:0px;
    width:100%;
    text-align: center;
    color: #fff;
    font-size:0.35rem;
}
.loading .sun {
    position: absolute;
    right: 0.7rem;
    top:0.7rem;
    width:1.27rem;
    height:1.2rem;
    background: url("../images/sun.png") center no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
}
.loading .cloud {
    position: absolute;
    width:0.64rem;
    height:0.48rem;
    background: url("../images/cloud.png") center no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
}
.loading .cloud-1 {
    top:2rem;
    right:0.3rem;
}
.loading .cloud-2 {
    bottom:2rem;
    right:0.5rem;
}
.loading .cloud-3 {
    top:5rem;
    right:0.8rem;
}
.loading .cloud-4 {
    top:5rem;
    left:0.4rem;
}
.loading .cloud-5 {
    top:7rem;
    left:0.7rem;
}
.page {
    position: relative;
    height:100%;
    width:100%;
}
.page.page-1 {
    display: none;
}
.logo {
    position: relative;
    left:0.15rem;
    width:3.11rem;
    height:1.05rem;
    background: url("../images/logo.png") no-repeat center;
    -webkit-background-size:contain;
    background-size:contain;
}

.slogan-1{
    display: none;
    position: relative;
    width: 6.3rem;
    height:4.7rem;
    background: url("../images/slogan-bg-1.png") no-repeat center;
    -webkit-background-size:contain;
    background-size:contain;
}

.slogan-1 .word{
    position: absolute;
    top:0.4rem;
    left:0.45rem;
    width: 5.4rem;
    height:2.31rem;
    background: url("../images/slogan-1.png") no-repeat center;
    -webkit-background-size:contain;
    background-size:contain;
}
.slogan-2 {
    position: relative;
    width: 6.32rem;
    height:3.34rem;
    background: url("../images/slogan-bg-2.png") no-repeat center;
    -webkit-background-size:contain;
    background-size:contain;
}
.slogan-2 .word{
    position: absolute;
    top:0.25rem;
    left:0.05rem;
    width: 6rem;
    height:2.44rem;
    background: url("../images/slogan-2.png") no-repeat center;
    -webkit-background-size:contain;
    background-size:contain;
}
.slogan-3{
    position: relative;
    margin-top:0.5rem;
    width: 6.3rem;
    height:4.7rem;
    background: url("../images/slogan-bg-1.png") no-repeat center;
    -webkit-background-size:contain;
    background-size:contain;
}

.slogan-3 .word{
    position: absolute;
    top: 0.2rem;
    left: 0.25rem;
    width: 5.3rem;
    height:2.31rem;
    background: url("../images/slogan-2.png") no-repeat center;
    -webkit-background-size:contain;
    background-size:contain;
}

/*启动页*/
.page-1 .pan {
    position: relative;
    left:0.25rem;
    width:5.25rem;
    height:2.45rem;
    background: url("../images/pan.png") center no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
}
.page-1 .pan .tofu-pan{
    position: absolute;
    top:0.6rem;
    left:2rem;
    width:2.65rem;
    height:1.2rem;
    background: url("../images/tofu-pan.png") center no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
}
.page-1 .pan .fire {
    position: absolute;
    bottom:-0.3rem;
    left:2rem;
    width:2.66rem;
    height:1.13rem;
    background: url("../images/sprites-fire.png") -0.02rem 0 no-repeat;
    -webkit-background-size:48.7rem 1.13rem;
    background-size:48.7rem 1.13rem;
    /*border:1px solid red;*/
}
.page-1 .pan .smog {
    position: absolute;
    top:-0.6rem;
    left:2.1rem;
    width:2.42rem;
    height:1.88rem;
    /*background: url("../images/smog.png") center no-repeat;*/
    /*background: url(../images/sprites-somg.png)  -9.15rem 0 no-repeat;*/
    -webkit-background-size:14.67rem 1.88rem;
    background-size:14.67rem 1.88rem;
    z-index:20;
}

.page-1 .box-2 {
    display: none;
    position: relative;
    top:-2rem;
    /*border:1px solid red;*/
    width:100%;
    height:6.34rem;
}

.person-1 {
    position: absolute;
    left:0.4rem;
    top:0.1rem;
    width:2.81rem;
    height:3.35rem;
    background: url("../images/person-1.png") center no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
}

.person-2 {
    position: absolute;
    left:3.1rem;
    top:0rem;
    width:2.15rem;
    height:3rem;
    background: url("../images/person-2.png") center no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
}
.person-3 {
    position: absolute;
    left:3.27rem;
    top:1.86rem;
    width:2.6rem;
    height:3.5rem;
    background: url("../images/person-3.png") center no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
}

.tofu-ku {
    position: absolute;
    top:3.95rem;
    left:0.6rem;
    width:2.18rem;
    height:2.15rem;
    background: url("../images/sprites-tofu.png")  -16.76rem 0  no-repeat;
    -webkit-background-size:27.35rem 2.15rem;
    background-size:27.35rem 2.15rem;
    /*border:1px solid red;*/
}
.game-begin{
    position: absolute;
    top:5.65rem;
    right:0.3rem;
    width:2.61rem;
    height:0.87rem;
}
.game-start .btn-game,
.game-begin .btn-game {
    width:2.61rem;
    height:0.87rem;
    background: url("../images/btn-game.png") center no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
}
.game-start .btn-game:active,
.game-begin .btn-game:active{
    background-position-y: 0.07rem;
    opacity: 0.8;
}
.game-start .hand,
.game-begin .hand{
    position: absolute;
    top:-0.75rem;
    left:-0.55rem;
    width:1.2rem;
    height:0.7rem;
    background: url("../images/hand.png") center no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
}
.game-start .flash,
.game-begin .flash{
    position: absolute;
    top:-0.35rem;
    left:0.6rem;
    width:0.42rem;
    height:0.54rem;
    background: url("../images/flash.png") center no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
    z-index: 10;
}

.page.game {
    position: absolute;
    top:0px;
    left:0px;
    transform: translateX(100%);
    transition: all 0.8s;
    opacity: 1;
}
.page.show {
    transform: translateX(0%);
}
.page.hide {
    transform: translateX(100%);
}
/*音乐*/
.page.game .music {
    position: absolute;
    top:0.15rem;
    right:0.15rem;
    width:0.8rem;
    height:0.62rem;
    background: url("../images/play.png") center no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
}
.page.game .music.on {
    background: url("../images/play.png") center no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
}
.page.game .music.off {
    background: url("../images/pause.png") center no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
}

/*游戏页*/
.game-box {
    position: relative;
    top:-0.1rem;
    width:100%;
    height:6.16rem;
    background: url("../images/mouth.png?v=20161010") center no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
}

.game-box .dish {
    position: absolute;
    top:0.6rem;
    left:50%;
    margin-left:-2.4rem;
    width:4.85rem;
    height:4.85rem;
    background: url("../images/dish.png") center no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
}
.game-box .tofu {
    position: absolute;
    width:2rem;
    height:1.55rem;
    top:50%;
    margin-top:-0.8rem;
    left:50%;
    margin-left:-1rem;
    background: url("../images/tofu-fun.png") center no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
    /*border:1px solid red;*/
    transition: all 100ms linear;
    opacity: 1;
}
/*定时器*/
.timer-box {
    position: absolute;
    bottom: 0.2rem;
    left:0.4rem;
    width:2rem;
    height:0.85rem;
    background: url("../images/timer.png") center no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
}
.timer-box .pointer {
    position: absolute;
    top: 0.26rem;
    left: 0.09rem;
    width:0.5rem;
    height:0.5rem;
    background: url("../images/timer-pointer.png")  center no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
    /*border:1px solid red;*/

}
.timer-box .pointer.animated {
    animation: pointer 0.5s linear infinite;
}

@keyframes pointer {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
@-webkit-keyframes pointer {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}
.timer-box .timer {
    font-family: Arial;
    position: absolute;
    right: 0.15rem;
    top: 0.3rem;
    width:1.1rem;
    height:0.43rem;
    line-height:0.43rem;
    color: #ff3a89;
    font-size:0.31rem;
    text-align: center;
    font-weight:bold;
}
/*游戏弹窗*/
.game .popup {
    position: absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.8);
    z-index: 100;
    transform: translateX(100%);
    transition: all 0.5s;
    opacity: 1;
}
.game .popup.show {
    transform: translateX(0%);
}
.game .popup.hide {
    transform: translateX(100%);
}

/*游戏开始提示*/
.game .popup .content {
    padding-top:0.7rem;
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-2.71rem;
    margin-top:-4.07rem;
    width:5.42rem;
    height:8.15rem;
    background: url("../images/popup-bg.png") center  no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
    box-sizing: border-box;
}
.popup .content .btn {
    display: block;
    width:2rem;
    height:0.7rem;
}

.popup .content .btn.btn-again {
    background: url("../images/btn-again.png") center bottom  no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
}
.popup .content .btn.btn-share {
    background: url("../images/btn-share.png") center bottom no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
}
.popup .content .btn.btn-get {
    background: url("../images/btn-get.png") center bottom no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
}
.popup .content .btn:active {
    background-position-y: 0.07rem;
    opacity: 0.8;
}
.popup .content h1 {
    text-align: center;
    color: #520f0f;
    font-size:0.8rem;
}
.popup .content h1 {
    text-align: center;
    color: #520f0f;
    font-size:0.8rem;
}
.popup .content p{
    color: #333333;
}
/*提示*/
.game .popup.tpis .content .img {
    margin: 0 auto;
    width:2.5rem;
    height:6.76rem;
    background: url("../images/popup-tips.png?v=123") center no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
}
.game .popup.tpis .content .close {
    position: absolute;
    top:0.3rem;
    right:0.3rem;
    width:0.5rem;
    height:0.5rem;
    background: url("../images/close.png") no-repeat center;
    -webkit-background-size:contain;
    background-size:contain;
    transition:all 0.5s;
}
.game .popup.tpis .content .close:active {
    opacity: 0.8;
    transform: rotate(90deg);
}
/*规则*/
.game .popup.rule {
    display: none;
}
.game .popup.rule .content .text-1{
    font-size:0.26rem;
    margin-top:0.5rem;
}
.game .popup.rule .content .text-1 p {
    text-align: center;
    line-height:0.35rem;
}
.game .popup.rule .content .text-1 span {
    color: #cc3333;
    font-weight:bold;
}

.game .popup.rule .content h3 {
    margin-top:0.6rem;
    padding-left:0.5rem;
    color: #333;
    font-size:0.3rem;
    font-weight:bold;
}
.game .popup.rule .content .text-2{
    padding-left:0.5rem;
    font-size:0.2rem;
    margin-top:0.25rem;
    color: #000000;
    text-align: left;
    font-weight:bold;
}

.game .popup.rule .content .text-2 p {
    line-height:0.3rem;
}
.game .popup.rule .content .text-2 p span {
    font-size:0.21rem;
    color: #cc0000;
}
.game .popup.rule .content .text-2 .terms {
    font-size:0.16rem;
}
.game .popup.rule .game-start {
    position: relative;
    margin:0 auto;
    margin-top:1rem;
    width:2.61rem;
    height:0.87rem;
}

/*失败*/
.popup.loser .content .box{
    margin:0 auto;
    width:4.41rem;
    height:6.05rem;
    background: url("../images/popup-loser.png") center no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
}
.popup.loser .content .box .word{
    padding-top:1.2rem;
    color: #7d0303;
    font-size:0.35rem;
    text-align: center;
    font-weight:bold;

}
.popup.loser .content .box .word p {
    line-height:0.4rem;
}
.popup.loser .content .btn-box {
    width:4rem;
    position: absolute;
    bottom: 0.54rem;
    left:50%;
    margin-left:-2rem;
}
.popup.loser .content .btn-box .btn-again {
    float: left;
}
.popup.loser .content .btn-box .btn-share {
    float: right;
}

/*pass*/
.popup.pass .content .box{
    margin:0 auto;
    width:4.3rem;
    height:5.5rem;
    background: url("../images/popup-pass.png") center no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
}
.popup.pass .content .btn-get {
    margin:0 auto;
    margin-top:0.1rem;
}
.popup.pass .content .btn-box {
    margin:0 auto;
    width:4rem;
    overflow: hidden;
}
.popup.pass .content .btn-box .btn-again {
    float: left;
}
.popup.pass .content .btn-box .btn-share {
    float: right;
}

/*分享*/
.popup.share {
    display: none;
    transform: translateX(0%);
    z-index:101;
}
.popup.share .popup-share {
    position: relative;
    top:0.5rem;
    margin:0 auto;
    width:4.64rem;
    height:6.68rem;
    background: url("../images/share-tips.png") center no-repeat;
    -webkit-background-size:contain;
    background-size:contain;
}

/*媒体查询*/